<template>
  <div id="myGuanzhu">
    <Head/>
    <el-row>
      <el-col :span="6" :xs="6" :style="allTabL" class="GuanzhuL">
        <div class="allTab">
          <el-select v-model="value" placeholder="只看作者">
            <ul class="isTitle">
              <el-option v-for="(item, index) in list"
                         :label="item.title"
                         :value="item.value"
                         :key="index">
                <router-link :to="{ path: item.path }">
                  {{ item.title }}
                </router-link>
              </el-option>
            </ul>
          </el-select>
        </div>
        <div class="yd-alltab">
          <alt2></alt2>
        </div>
      </el-col>
      <el-col :span="17"  :xs="16" :offset="1" class="GuanzhuR">
        <router-view></router-view>
          <!-- <Rightcont/> -->
          <!-- <router-view class="view two" name="right"></router-view> -->
      </el-col>
    </el-row>
    <Footers class="hidden-sm-and-up"/>
  </div>
</template>

<script>
import Head from "../Head";
import alt2 from "./allTableft2.vue"
import Footers from '../Footers'

export default {
  name: "myGuanzhu",
  data() {
    return {
      list: [
        { path: "/myGuanzhu",value: '选项1', title: "全部关注" },
        { path: "/myGuanzhu1",value: '选项2', title: "只看作者" },
        { path: "/myGuanzhu2",value: '选项3', title: "只看专题" },
        { path: "/myGuanzhu3",value: '选项4', title: "只看文集" },
        { path: "/myGuanzhu4",value: '选项5', title: "只看推送更新" }
      ],
      allTabL: {
        height:'80%',
        paddingBottom: "15%",
        borderRight: "1px solid #f0f0f0"
      }
    };
  },
  components: {
    Head,
    alt2,
    Footers
  }
};
</script>

<style scoped>
  #myGuanzhu {
    width: 60%;
    margin: 0 auto;
    padding-top: 80px;
  }
  .allTab {
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
  }
  .el-select .el-input__inner{
    padding-left: 0;
    border:none !important;
  }
  .isTitle a {
    display: block;
    text-align: center;
    /*padding: 0px 0 30px 0;*/
    font-size: 14px;
    color: #333333;
  }
  .isTitle li:hover {
    background-color: #c8c8c8;
  }

  @media screen and (max-width: 750px) {
    #myGuanzhu{
      width:90%;
      padding-bottom: 60px;
    }
    .el-select .el-input__inner {
      font-size: 12.5px;
    }
    .GuanzhuL{
      position: fixed;
    }
    .GuanzhuR{
      margin-left: 30% !important;
    }
    .yd-alltab{
      margin-left: -10px;
    }
  }
</style>
